<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:1200px;
            height:300px;
            margin:200px auto;
            position:relative;
            background:#ff0;
            overflow:hidden;

        }
        #div1 ul{
            position:absolute;
            left:0;
            top:0;
        }
        #div1 ul li {
            float:left;
            width:300px;
            height:300px;
            list-style:none;
        }
        img{
            width:300px;
            height:300px;
        }
    </style>
    <script>
        window.onload=function(){
          var oDiv=document.getElementById('div1');
          var oUl=oDiv.getElementsByTagName('ul')[0];
          var aLi=oUl.getElementsByTagName('li');
          oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//复制一份
          oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

          setInterval(function(){
              if(oUl.offsetLeft<-oUl.offsetWidth/2){
                  oUl.style.left='0';
              }  //从右向左动
              if(oUl.offsetLeft>0){
                  oUl.style.left=-oUl.offsetWidth/2 +'px';
              }//从左向右动

              oUl.style.left=oUl.offsetLeft-2+'px';
          },30);

        };
    </script>
</head>
<body>
<div id="div1">
    <ul>
        <li>
            <img src="../img/view1.jpg" >
        </li>
        <li>
            <img src="../img/view2.jpg" >
        </li>
        <li>
            <img src="../img/view3.jpg" >
        </li>
        <li>
            <img src="../img/view4.jpg" >
        </li>
    </ul>
</div>
</body>
</html>